<template>
	<view class="content">
		<div class="nav-box-big">
			<view class="nav-box">
				<view class="nav-box-item" @click="showXiala" data-index='0'>{{sort_text}} <image v-if="!select_one" style="width: 14px;height: 14px;margin-left: 5px;" :src="xiasanjiaoImg" mode=""></image> <image v-if="select_one" style="width: 14px;height: 14px;margin-left: 5px;" :src="selectImg" mode=""></image></view>
				<view class="nav-box-item" @click="showXiala" data-index='1'>{{time_text}} <image v-if="!select_two" style="width: 14px;height: 14px;margin-left: 5px;" :src="xiasanjiaoImg" mode=""></image> <image v-if="select_two" style="width: 14px;height: 14px;margin-left: 5px;" :src="selectImg" mode=""></image> </view>
				<view class="nav-box-item" @click="showXiala" data-index='2'>{{huishou_text}} <image v-if="!select_three" style="width: 14px;height: 14px;margin-left: 5px;" :src="xiasanjiaoImg" mode=""></image> <image v-if="select_three" style="width: 14px;height: 14px;margin-left: 5px;" :src="selectImg" mode=""></image> </view>
			</view>
			<view class="xiala-box" v-show="showTF" @click="showTF = false">
				<view class="xiala-box-item" v-for="(item,index) in xialaArray" :key='index' :data-index='index' @click.stop="saixuanFun">{{item.text}}</view>
			</view>
		</div>
		<view class="order-list-box">
			<view class="order-list-box-item" v-for="(item,index) in snatchList" :key='index'>
				<view class="order-list-box-item-top">
					<view class="order-list-box-item-top-left">
						<image class="user-img" :src="item.head_image_url" mode=""></image>
						<view class="user-news-box-name">{{item.contact}}</view>
					</view>
					<view class="user-news-box-julia"> <image class="dingwei-icon" :src="dingwei" mode=""></image> 距你{{ item.juli | juliFun}}km</view>
				</view>
				<view class="order-list-news">
					<view class="order-list-news-p"><text>上门地址:</text>{{item.province}}{{item.city}}{{item.country}}{{item.address}}</view>
					<view class="order-list-news-p"><text>预约时间:</text>{{item.yuyue_date}} {{item.yuyue_start_time}}~{{item.yuyue_end_time}}</view>
					<view class="order-list-news-p"><text>回收类别:</text>{{item.items}} </view>
					<view class="order-list-news-p"><text>预估重量:</text>{{item.weight}} </view>
					<view class="order-list-news-p"><text>预估佣金:</text > <text style="color:red">{{item.yg_price}}</text>  </view>
				</view>
				<view class="liji-qiang-btn" :data-id='item.id' @click="lijiqiangdanFun">立即抢单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	
	export default{
		data(){
			return{
				userImg:baseUrl+'/uploads/static/image/recovery_my_top_head@2x.png',
				dingwei:baseUrl+'/uploads/static/image/recovery_ recycler_task_icon_location@2x.png',
				xiasanjiaoImg:baseUrl+'/uploads/static/image/xiasanjiao.png',
				selectImg:baseUrl+'/uploads/static/image/recovery_ recycler_task_sel_icon@2x.png',
				xialaArray:[
					// {name:'1',value:'1'}
				],
				showTF:false,
				select_index:null,//选中的下标
				select_one:false,
				select_two:false,
				select_three:false,
				sortArray:[
					{text:'从近到远',value:'asc'},
					{text:'从远到近',value:'aesc'}
				],
				snatchList:[],//单子列表
				sort_text:'按距离排序',
				
				time_text:'预约时间段',
				timeArrayOrgin:[
					{
						text:'08:00-09:00',
						time:new Date(new Date().toDateString() + ' 8:00').getTime(),
						start:'08:00',
						end:'09:00'
					},
					{
						text:'09:00-10:00',
						time:new Date(new Date().toDateString() + ' 9:00').getTime(),
						start:'09:00',
						end:'10:00'
					},
					{
						text:'10:00-11:00',
						time:new Date(new Date().toDateString() + ' 10:00').getTime(),
						start:'10:00',
						end:'11:00'
					},
					{
						text:'11:00-12:00',
						time:new Date(new Date().toDateString() + ' 11:00').getTime(),
						start:'11:00',
						end:'12:00'
					},
					{
						text:'12:00-13:00',
						time:new Date(new Date().toDateString() + ' 12:00').getTime(),
						start:'12:00',
						end:'13:00'
					},
					{
						text:'13:00-14:00',
						time:new Date(new Date().toDateString() + ' 13:00').getTime(),
						start:'13:00',
						end:'14:00'
					},
					{
						text:'14:00-15:00',
						time:new Date(new Date().toDateString() + ' 14:00').getTime(),
						start:'14:00',
						end:'15:00'
					},
					{
						text:'15:00-16:00',
						time:new Date(new Date().toDateString() + ' 15:00').getTime(),
						start:'15:00',
						end:'16:00'
					},
					{
						text:'16:00-17:00',
						time:new Date(new Date().toDateString() + ' 16:00').getTime(),
						start:'16:00',
						end:'17:00'
					}
				],
				
				huishou_text:'回收类别',
				huishouArray:[],
				
				sort:'',
				yuyue_start_time:'',
				yuyue_end_time:'',
				items:'',//类别
				lng:'',//经度
				lat:'',//维度
				page:1,//页数
			}
		},
		filters:{
			juliFun(value){
				if(value){
					console.log()
					return (Number(value)/1000).toFixed(2)
				}
			}
		},
		onLoad(){
			this.getTecycleFun()
		},
		onShow() {
			this.getSnatchOrdersFun()
		},
		onReachBottom(){
			this.page = this.page+1
			this.getList()
		},
		methods:{
			getTecycleFun(){
				//获取回收类别
				let _this = this
				http.getTecycleType().then((res)=>{
					if(res.data.code == 1){
						let data = res.data.data
						_this.huishouArray = data
					}
				})	
			},
			showXiala(e){
				this.select_index = e.currentTarget.dataset.index
				if(this.select_index == 0){
					//距离
					this.xialaArray = this.sortArray
				}else if(this.select_index == 1){
					//时间段
					this.xialaArray = this.timeArrayOrgin
				}else if(this.select_index == 2){
					//类别
					this.xialaArray = []
					this.huishouArray.forEach((item)=>{
						this.xialaArray.push({
							text:item.title,
							value:item.id
						})
					})
				}
				this.showTF = true
			},
			saixuanFun(e){
				let saixuan_index = e.currentTarget.dataset.index
				console.log(saixuan_index)
				if(this.select_index == 0){
					this.sort_text = this.xialaArray[saixuan_index].text
					this.sort = this.sortArray[saixuan_index].value
					this.select_one = true
				}else if(this.select_index == 1){
					this.time_text = this.xialaArray[saixuan_index].text
					this.yuyue_start_time = this.timeArrayOrgin[saixuan_index].start
					this.yuyue_end_time = this.timeArrayOrgin[saixuan_index].end
					this.select_two = true
				}else if(this.select_index == 2){
					this.huishou_text = this.xialaArray[saixuan_index].text
					this.items = this.xialaArray[saixuan_index].text
					this.select_three = true
				}
				this.snatchList = []
				this.page = 1
				this.getList()
				this.showTF = false
			},
			getSnatchOrdersFun(){
				let _this = this
				uni.getSetting({
				   success(res) {
					   console.log(res)
					   if(res.authSetting['scope.userLocation']){
						   uni.getLocation({
						   	type: 'wgs84', //返回可以用于uni.openLocation的经纬度
						   	success: function (res) {
						   		const latitude = res.latitude;
						   		const longitude = res.longitude;
						   		// console.log('纬度：' + res.latitude);
						   		// console.log('经度：' + res.longitude);
						   		_this.lat = res.latitude
						   		_this.lng = res.longitude
						   		uni.setStorageSync('recoveryLat',res.latitude)
						   		uni.setStorageSync('recoveryLng',res.longitude)
						   		_this.getList()
						   	}
						   });
					   }else{
						   uni.authorize({
						   	scope: 'scope.userLocation',
						   	success() {
						   		uni.getLocation({
						   			type: 'wgs84', //返回可以用于uni.openLocation的经纬度
						   			success: function (res) {
						   				const latitude = res.latitude;
						   				const longitude = res.longitude;
						   				// console.log('纬度：' + res.latitude);
						   				// console.log('经度：' + res.longitude);
						   				_this.lat = res.latitude
						   				_this.lng = res.longitude
						   				uni.setStorageSync('recoveryLat',res.latitude)
						   				uni.setStorageSync('recoveryLng',res.longitude)
						   				_this.getList()
						   			}
						   		});
						   	},
						   	fail(){
						   		uni.showModal({
						   			title:'提示',
						   			content: '暂无权限获取用户位置,请检查定位服务是否开启或定位权限拒绝'
						   		})
						   	}
						   })
					   }
				   }
				})
			},
			getList(){
				uni.showLoading()
				let _this = this
				http.getSnatchOrders({
					lng:_this.lng,
					lat:_this.lat,
					sort:_this.sort,
					yuyue_start_time:_this.yuyue_start_time,
					yuyue_end_time:_this.yuyue_end_time,
					items:_this.items,
					page:_this.page
				}).then((res)=>{
					console.log(res)
					uni.hideLoading()
					if(res.data.code == 1){
						_this.snatchList = _this.snatchList.concat(res.data.data) 
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
			},
			lijiqiangdanFun(e){
				let id = e.currentTarget.dataset.id
				uni.showModal({
					title: '提示',
					content: '是否立即抢单？',
					success: function (res) {
						if (res.confirm) {
							http.getCompeteOrder({id:id}).then((res)=>{
								console.log(res)
								uni.navigateTo({
									url:'/pages/recoveryCenter/orderList'
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.content{
		width: 100%;
		min-height: 100vh;
		background: #F8F9FD;
		overflow: hidden;
		font-family: 'PingFang Bold';
	}
	.nav-box-big{width: 100%;position: fixed;z-index: 10;background: rgba(0,0,0,0.8);}
	.nav-box{width: 100%;display: flex;flex-direction: row;align-items: center;box-sizing: border-box;padding-top: 20px;background: #00CB8B;}
	.nav-box-item{width: 150px;height: 50px;text-align: center;line-height: 50px;color: #fff;font-size: 14px;display: flex;flex-direction: row;align-items: center;justify-content: center;}
	.xiala-box{width: 100%;min-height: 100vh;}
	.xiala-box-item{width: 100%;height: 55px;border-bottom: 1px solid #f6f6f6;text-align: center;line-height: 55px;background: #fff;color: #333;}
	.order-list-box{width: 100%;box-sizing: border-box;padding: 12px;overflow: hidden;margin-top: 70px;}
	.order-list-box-item{width: 100%;border-radius: 10px;background: #fff;box-sizing: border-box;padding: 20px 20px 15px 20px;margin-bottom: 20px;}
	.order-list-box-item-top{width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;border-bottom: 1px solid #f6f6f6;box-sizing: border-box;padding-bottom: 15px;}
	.order-list-box-item-top-left{display: flex;flex-direction: row;align-items: center;}
	.user-img{width: 36px;height: 36px;border-radius: 50%;margin-right: 15px;}
	.user-news-box-name{font-size: 16px;color: #333;}
	.dingwei-icon{width: 16px;height: 16px;margin-right: 5px;}
	.user-news-box-julia{font-size: 12px;color: #333;display: flex;flex-direction: row;align-items: center;}
	.liji-qiang-btn{width: 100%;height: 44px;border-radius: 5px;background: #00CB8B;color: #fff;font-size: 14px;text-align: center;line-height: 45px;margin-top: 15px;}
	.order-list-news{width: 100%;margin-top: 23px;box-sizing: border-box;padding-bottom: 15px;border-bottom: 1px solid #f6f6f6;}
	.order-list-news-p{width: 100%;margin-bottom: 10px;font-size: 12px;color: #333;}
	.order-list-news-p text{color: #999;margin-right: 15px;}
	.order-list-news-p:last-child{margin-bottom: 0;}
</style>